<template>
  <view class="informationAll">
    <uni-nav-bar title="个人信息" color="#333" left-icon="left" @clickLeft="redirectTo('index/mine')" statusBar></uni-nav-bar>
    <environment></environment>
    <view class="information">
      <view class="informations" style="padding: 30rpx 0px">
        <view>头像</view>
        <image :src="userInfo.avatar" class="information_img"></image>
      </view>
    </view>
    <view class="information">
      <view class="informations">
        <view>昵称</view>
        <view>
          <text>{{ userInfo.nickname }}</text>
        </view>
      </view>
      <view class="informations">
        <view>姓名</view>
        <view @click="showPopup('name')">
          <text>{{ userInfo.realname ? userInfo.realname : '未填写' }}</text>
          <uni-icons type="right" color="#999" size="14"></uni-icons>
        </view>
      </view>
      <view class="informations">
        <view>手机号</view>
        <view @click="showPopup('phone')">
          <text>{{ userInfo.mobile ? userInfo.mobile : '未绑定' }}</text>
          <uni-icons type="right" color="#999" size="14"></uni-icons>
        </view>
      </view>
    </view>
    <view class="information">
      <view class="informations">
        <view>银行卡</view>
        <view @click="showPopup('bank')">
          <text>{{ bankCardInfo }}</text>
          <uni-icons type="right" color="#999" size="14"></uni-icons>
        </view>
      </view>
    </view>
  </view>
  <!-- 更换姓名弹框 -->
  <uni-popup ref="mineNamePopup" type="bottom" :is-mask-click="false"><mineName @close="closemineName" /></uni-popup>
  <!-- 手机号面板弹框 -->
  <uni-popup ref="PhonePadPopup" type="bottom" :is-mask-click="false">
    <PhonePad v-if="isShowPhonePad" :type="phonePadType" @close="closePhonePad" />
  </uni-popup>
  <!-- 银行卡面板 -->
  <uni-popup ref="BankPadPopup" type="bottom" :is-mask-click="false">
    <BankPad v-if="isShowBankPad" :type="bankPadType" @close="closeBankPad" />
  </uni-popup>
</template>

<script setup lang="ts">
import { useFinanceStore } from '@/stores/finance';
import environment from '@c/pobulic/environment.vue';
import { useUserStore } from '@/stores/user';
import { redirectTo } from '@/utils/navigator';
import { showToast } from '@/utils/prompt';
import BankPad from '@c/common/BankPad.vue';
import PhonePad from '@c/common/PhonePad.vue';
import mineName from '@c/mine/mine_name.vue';
import { computed, ref } from 'vue';
/**
 * 个人信息
 * @param userInfo  用户信息
 * @param financeStore  编辑的用户信息
 * @param hasRealname  用户的真实姓名
 * @param hasBankInfo  用户绑定银行卡信息
 * @param bankCardInfo  银行卡页面展示
 * @param phonePadType  用户绑定手机号码状态
 * @param bankPadType  用户绑定银行卡状态
 * @param isShowPhonePad  手机号码弹框
 * @param isShowBankPad  银行卡弹框
 * @param mineNamePopup  姓名弹框
 * @param PhonePadPopup  手机号码面板值
 * @param BankPadPopup  银行卡面板值
 * @return {type}
 */
// static
const userInfo = useUserStore();
const financeStore = useFinanceStore();
const hasRealname = userInfo.realname;
const hasBankInfo = computed(() => financeStore.bankID !== '');
if (!hasBankInfo.value) {
  financeStore.getBankInfo();
}
const bankCardInfo = computed(() =>
  hasBankInfo.value ? `${financeStore.bank_name} ****${financeStore.card_no.slice(-4)}` : '未绑定',
);
// data
const phonePadType = ref('');
const bankPadType = ref('');
const isShowPhonePad = ref(false);
const isShowBankPad = ref(false);
// refs
const mineNamePopup = ref(null);
const PhonePadPopup = ref(null);
const BankPadPopup = ref(null);
/**
 * 状态值调用不同事件
 * @@param type 状态值  
 */
function showPopup(type: string) {
  switch (type) {
    case 'name':
      mineNamePopup.value.open();
      break;
    case 'phone':
      phonePadType.value = userInfo.mobile ? 'info' : 'bind';
      openPhonePad();
      break;
    case 'bank':
      if (hasRealname) {
        bankPadType.value = hasBankInfo.value ? 'info' : 'bind';
        openBankPad();
      } else {
        showToast('请先绑定姓名');
      }
      break;
  }
}
/**
 * 关闭更换姓名弹框
 */
function closemineName() {
  mineNamePopup.value.close();
}
/**
 * 打开绑定手机号码弹框
 */
function openPhonePad() {
  isShowPhonePad.value = true;
  PhonePadPopup.value.open();
}
/**
 * 关闭绑定手机号码弹框
 */
function closePhonePad() {
  isShowPhonePad.value = false;
  PhonePadPopup.value.close();
}
/**
 * 绑定银行卡弹框
 */
function openBankPad() {
  isShowBankPad.value = true;
  BankPadPopup.value.open();
}
/**
 * 关闭银行卡弹框
 */
function closeBankPad() {
  isShowBankPad.value = false;
  BankPadPopup.value.close();
}
</script>

<style scoped lang="less">
@import url('./less/information.less');
</style>
